<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>anychat_websocket</title>
	<link href="dist/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-6">
			<h3 class="text-info">视频区域</h3>
			<div id="pp"></div><br/>
			<div id="cc"></div><br/>
			<input class="input-sm" type="text" id="ip" placeholder="ip">
			<input class="input-sm" type="text" id="port" placeholder="port">
			<button class="btn btn-default"  onclick="connect()">开始连接</button>
			<input class="input-sm" style="width: 80px" type="text" id="roomid" placeholder="房间号">
			<button class="btn btn-default"  onclick="enterroom()">进房间</button>
			<button class="btn btn-default"  onclick="opencamera(1)">打开自己摄像头</button>
			<button class="btn btn-default"  onclick="opencamera(0)">关闭自己摄像头</button>
			<input class="input-sm" style="width: 80px" type="text" id="userid" placeholder="对方uid">
			<button class="btn btn-default"  onclick="opencamera_o(1)">打开对方摄像头</button>
			<button class="btn btn-default"  onclick="opencamera_o(0)">关闭对方摄像头</button>
			<input class="input-sm" type="text" id="sendtext" placeholder="文本信息">
			<button class="btn btn-default"  onclick="sendtext()">发送</button>
			<button class="btn btn-default"  onclick="leaveroom()">离开房间</button>
			<button class="btn btn-default"  onclick="layout()">注销</button>

			<br/>
			<p style="margin-top: 5px" class="text-info">营业厅</p>
			<div style="margin-top: 5px">
				营业厅：<select class="input-sm" id="area" style="width: 150px"></select>
				<button class="btn btn-default" onclick="enterArea(1)">进入营业厅</button>
				<button class="btn btn-default" onclick="enterArea(0)">退出营业厅</button>
			</div>
			<p style="margin-top: 5px" class="text-info">队列</p>
			<div style="margin-top: 5px">
				队列：<select class="input-sm" id="queue" style="width: 150px"></select>
				<button class="btn btn-default" onclick="enterQueue(1)">进入队列</button>
				<button class="btn btn-default" onclick="enterQueue(0)">退出队列</button>
			</div>

			<!--<p style="margin-top: 5px" class="text-info">呼叫</p>-->
			<!--<div style="margin-top: 5px">-->
				<!--<button class="btn btn-default" onclick="callOther()">开始呼叫</button>-->
			<!--</div>-->
		</div>


		<div class="col-sm-6">
			<h3 class="text-info">日志：</h3>
			<div id="log"></div>
		</div>
	</div>

</div>

<div class="modal fade" tabindex="-1" role="dialog" id="callmodal" data-backdrop="static">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">有人呼叫</h4>
			</div>
			<div class="modal-body">
				<p>有人呼叫我</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" onclick="cancel_call()">拒绝</button>
				<button type="button" class="btn btn-primary" onclick="agree_call()">同意</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->


</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="dist/anychat4html5.js"></script>
<script src="public/anychatevent.js" charset="GB2312"></script>
<script src="public/anychatsdk.js" charset="gb2312"></script>
<script src="public/anychatobject.js" charset="gb2312"></script>


<script>

	BRAC_InitSDK();

//	BRAC_SetSDKOption(BRAC_SO_CLOUD_APPGUID,'8C883CB7-8BEA-464A-B4E9-5E0BE18B15D4');

	document.getElementById('userid').value = localStorage.anychat_userid || '';
	document.getElementById('roomid').value = localStorage.anychat_roomid || '';
	document.getElementById('ip').value = localStorage.anychat_ip || '';


	document.getElementById('ip').value = getPar('ip') || '127.0.0.1';
	document.getElementById('port').value = getPar('port') || '8940';
	function connect(){
		var ip = getPar('ip') || document.getElementById('ip').value || '127.0.0.1';
		localStorage.anychat_ip = ip;
		var port = getPar('port') || document.getElementById('port').value || '8940';
		BRAC_Connect(ip,port);
		log('正在链接:'+ip+':'+port);
	}

	function enterroom(){
		//进房间
		log('执行进入房间');
//		BRAC_GetSDKOptionString(BRAC_SO_CLOUD_APPGUID);
		BRAC_GetSDKOptionString(BRAC_SO_CORESDK_BUILDTIME);
		var roomid = document.getElementById('roomid').value || '2018';
		localStorage.anychat_roomid = roomid;
		BRAC_EnterRoom(roomid);

	}


	//发送文本信息
	function sendtext(){
		var text = document.getElementById('sendtext').value;
		if(text){
			var userid = document.getElementById('userid').value || '-6228';
			localStorage.anychat_userid = userid;
			BRAC_SendTextMessage(userid, 1, text);
			log('已发送uid：'+userid+'内容：'+text);
		}else{
			log('请输入文本');
		}

	}



	function leaveroom(){
		log('离开房间');
		BRAC_LeaveRoom();
	}

	function opencamera_o(isopen){
		var userid = document.getElementById('userid').value || '-6228';
		localStorage.anychat_userid = userid;
		if(userid){
			if(isopen==1){
				log('打开对方摄像头：'+userid);
				BRAC_UserSpeakControl(userid,1);
				BRAC_UserCameraControlEx(userid,1,0,0,'');
				BRAC_SetVideoPos(userid, document.getElementById('cc'),'dd');
			}else{
				log('关闭对方摄像头：'+userid);
				BRAC_UserCameraControlEx(userid,0,0,0,'');
			}
		}

	}

	function opencamera(isopen){
		//打开摄像头
	;
		var mDevices = '';

		setTimeout(function(){
			if(isopen==1){
				console.log('打开摄像头');
				mDevices = BRAC_EnumDevices(BRAC_DEVICE_VIDEOCAPTURE);
				BRAC_SetUserStreamInfo(-1, 0, BRAC_SO_LOCALVIDEO_DEVICENAME,mDevices[0]);
//			BRAC_SetUserStreamInfo(-1, 0, BRAC_SO_LOCALVIDEO_BITRATECTRL,400000);
				BRAC_SetUserStreamInfo(-1, 0, BRAC_SO_LOCALVIDEO_WIDTHCTRL,640);
				BRAC_SetUserStreamInfo(-1, 0, BRAC_SO_LOCALVIDEO_HEIGHTCTRL,480);
				BRAC_UserSpeakControl(-1,1);
				BRAC_UserCameraControlEx(-1,1,0,0,'');
				BRAC_SetVideoPos(-1, document.getElementById('pp'),'ab');
			}else{
				BRAC_UserCameraControlEx(-1,0,0,0,'');
			}

		},1);
	}



	//注销
	function layout(){
		BRAC_Logout();
	}










	function getPar(par){
		//获取当前URL
		var local_url = document.location.href;
		//获取要取得的get参数位置
		var get = local_url.indexOf(par +"=");
		if(get == -1){
			return false;
		}
		//截取字符串
		var get_par = local_url.slice(par.length + get + 1);
		//判断截取后的字符串是否还有其他get参数
		var nextPar = get_par.indexOf("&");
		if(nextPar != -1){
			get_par = get_par.slice(0, nextPar);
		}
		return get_par;
	}






	//初始化本地对象信息
	function InitClientObjectInfo(mSelfUserId, dwAgentFlags, dwPriority) {
		log('同步');
		//初始化服务区域Id数组
		areaArrayIdx = 0;
		areaIdArray = [];
		//业务对象身份初始化
		BRAC_SetSDKOption(BRAC_SO_OBJECT_INITFLAGS, dwAgentFlags);
		//客户端用户对象优先级
		BRAC_ObjectSetValue(ANYCHAT_OBJECT_TYPE_CLIENTUSER, mSelfUserId, ANYCHAT_OBJECT_INFO_PRIORITY, dwPriority);
		var dwAttribute = -1;
		BRAC_ObjectSetValue(ANYCHAT_OBJECT_TYPE_CLIENTUSER, mSelfUserId, ANYCHAT_OBJECT_INFO_ATTRIBUTE, dwAttribute);
		//向服务器发送数据同步请求指令
		BRAC_ObjectControl(ANYCHAT_OBJECT_TYPE_AREA, ANYCHAT_INVALID_OBJECT_ID, ANYCHAT_OBJECT_CTRL_SYNCDATA, mSelfUserId, 0, 0, 0, "");
	}

	/**
	 * 营业厅
	 */
	//服务区域(营业厅)ID数组
	var areaIdArray = null;
	var areaArrayIdx = 0;

	//显示服务区域(营业厅)
	function showSerivceArea() {
		var areaName = "";
		var description = "";

		var html = '';
		for (var idx in areaIdArray)
		{
			areaName = BRAC_ObjectGetStringValue(ANYCHAT_OBJECT_TYPE_AREA, areaIdArray[idx], ANYCHAT_OBJECT_INFO_NAME);
			description = BRAC_ObjectGetStringValue(ANYCHAT_OBJECT_TYPE_AREA, areaIdArray[idx], ANYCHAT_OBJECT_INFO_DESCRIPTION);
			html += '<option value="'+areaIdArray[idx]+'">'+areaName+'</option>';

		}

		document.getElementById('area').innerHTML = html;
	}

	function enterArea(is){
		var area = document.getElementById('area');
		var index=area.selectedIndex; //序号，取当前选中选项的序号
		var val = area.options[index].value;

		if(is){
			log('执行进入营业厅：'+val);
			BRAC_ObjectControl(ANYCHAT_OBJECT_TYPE_AREA, val, ANYCHAT_AREA_CTRL_USERENTER, 0, 0, 0, 0, "");
		}else{
			log('退出营业厅');
			BRAC_ObjectControl(ANYCHAT_OBJECT_TYPE_AREA, val, ANYCHAT_AREA_CTRL_USERLEAVE, 0, 0, 0, 0, "");
		}

	}


	function areaEnter(){
		var queueList =BRAC_ObjectGetIdList(ANYCHAT_OBJECT_TYPE_QUEUE);
		var html = '';
		for (var i in queueList) {
			var queueListId = parseInt(queueList[i]);
			/**获取队列名称*/
			var queueName = BRAC_ObjectGetStringValue(ANYCHAT_OBJECT_TYPE_QUEUE, queueListId, ANYCHAT_OBJECT_INFO_NAME);
			/**获取队列排队人数*/
			var queueLength = BRAC_ObjectGetIntValue(ANYCHAT_OBJECT_TYPE_QUEUE, queueListId, ANYCHAT_QUEUE_INFO_LENGTH);
			queueLength = queueLength < 0 ? 0 : queueLength;
			/**获取队列信息*/
			var queueInfo = BRAC_ObjectGetStringValue(ANYCHAT_OBJECT_TYPE_QUEUE, queueListId, ANYCHAT_OBJECT_INFO_DESCRIPTION);
			var attributeValue = BRAC_ObjectGetIntValue(ANYCHAT_OBJECT_TYPE_QUEUE, queueListId, ANYCHAT_OBJECT_INFO_ATTRIBUTE);

			var queueSkillName = "";
			html += '<option value="'+queueList[i]+'">'+queueName+'</option>';
			log('队列名称：'+queueName);
		}

		document.getElementById('queue').innerHTML = html;
	}

	function enterQueue(is){
		var area = document.getElementById('queue');
		var index=area.selectedIndex; //序号，取当前选中选项的序号
		var val = area.options[index].value;
		if(is){
			log('执行进入队列排队：'+val);
			var beforeUserNum = BRAC_ObjectGetIntValue(ANYCHAT_OBJECT_TYPE_QUEUE, val, ANYCHAT_QUEUE_INFO_BEFOREUSERNUM);
			beforeUserNum = beforeUserNum < 0 ? 0 : beforeUserNum;
			beforeUserNum++;
			log('排在我前面有'+beforeUserNum+'人');
			BRAC_ObjectControl(ANYCHAT_OBJECT_TYPE_QUEUE, val, ANYCHAT_QUEUE_CTRL_USERENTER, 0, 0, 0, 0, "");
		}else{
			log('退出队列');
			BRAC_ObjectControl(ANYCHAT_OBJECT_TYPE_QUEUE, val, ANYCHAT_QUEUE_CTRL_USERLEAVE,0 ,0,0,0,"");
		}

	}

	//呼叫
	function callOther(){
		BRAC_VideoCallControl(BRAC_VIDEOCALL_EVENT_REQUEST, -46, 0, 0, 0, "");
	}
	var mTargetUserId;
	function onVideoCallControlRequest(dwUserId, dwErrorCode, dwFlags, dwParam, szUserStr){
		mTargetUserId = dwUserId;
		$('#callmodal').modal('show');
	}


	//同意呼叫
	function agree_call(){
		BRAC_VideoCallControl(BRAC_VIDEOCALL_EVENT_REPLY, mTargetUserId, 0, 0, 0, "");
		$('#callmodal').modal('hide');
	}

	//拒绝呼叫
	function cancel_call(){
		BRAC_VideoCallControl(BRAC_VIDEOCALL_EVENT_REPLY, mTargetUserId, GV_ERR_SESSION_REFUSE, 0, 0, "");
		$('#callmodal').modal('hide');
	}

	//通话开始
	var isCall = false;
	function onVideoCallControlStart(dwUserId, dwErrorCode, dwFlags, dwParam, szUserStr)
	{
		//请求进入指定的房间
		BRAC_EnterRoom(dwParam, "", 0);
		isCall = true;
	}


	//呼叫打开
	function is_open_other(){
		if(isCall){
			log('打开自己摄像头');
			var mDevices = BRAC_EnumDevices(BRAC_DEVICE_VIDEOCAPTURE);
			BRAC_SetUserStreamInfo(-1, 0, BRAC_SO_LOCALVIDEO_DEVICENAME,mDevices[0]);
//			BRAC_SetUserStreamInfo(-1, 0, BRAC_SO_LOCALVIDEO_BITRATECTRL,400000);
			BRAC_SetUserStreamInfo(-1, 0, BRAC_SO_LOCALVIDEO_WIDTHCTRL,320);
			BRAC_SetUserStreamInfo(-1, 0, BRAC_SO_LOCALVIDEO_HEIGHTCTRL,240);
			BRAC_UserSpeakControl(-1,1);
			BRAC_UserCameraControlEx(-1,1,0,0,'');
			BRAC_SetVideoPos(-1, document.getElementById('pp'),'ab');

			setTimeout(function(){
				log('打开对方摄像头：'+mTargetUserId);
				BRAC_UserSpeakControl(mTargetUserId,1);
				BRAC_UserCameraControlEx(mTargetUserId,1,0,0,'');
				BRAC_SetVideoPos(mTargetUserId, document.getElementById('cc'),'dd');
			},1000);

		}
	}

	//视频通话结束
	function onVideoCallControlFinish(dwUserId, dwErrorCode, dwFlags, dwParam, szUserStr)
	{
		BRAC_LeaveRoom(-1);
		mTargetUserId = 0;
	}


</script>
</html>